import React from 'react';
import {Layout, Breadcrumb} from 'antd';
import {inject, observer} from 'mobx-react';
import LayoutHome from './LayoutHome';
import {Header, Sider} from './components';
import {ToolHistory} from '../utils';

import './LayoutMenu.scss';

/**
 * 菜单页面布局
 */
@inject('store')
@observer
export default class LayoutMenu extends LayoutHome {
  render() {
    //Layout对IE9的兼容性不好，使用要慎重
    return (
      <div className="g-layout-menu">
        <Header />
        <Layout>
          {this.renderSider()}
          {this.renderContent()}
        </Layout>
      </div>
    );
  }

  /**
   * 侧边栏
   */
  renderSider() {
    return <Sider type={this.props.type} />;
  }

  /**
   * 主体
   */
  renderContent() {
    return (
      <Layout.Content className="content">
        {this.renderContentBreadcrumb()}
        {this.renderRoutes()}
      </Layout.Content>
    );
  }

  /**
   * 主体的面包屑
   */
  renderContentBreadcrumb() {
    let views = [];
    let {routes} = this.props.store.routerData || {}; //当前的菜单层级列表
    let size = routes && routes.length;
    for (let i = 0; i < size; i++) {
      let item = routes[i];
      let view = null;
      view = <a onClick={() => ToolHistory.href(item.path)}>{item.label}</a>;
      views.push(<Breadcrumb.Item key={i}>{view}</Breadcrumb.Item>);
    }

    return (
      <Breadcrumb className="content-breadcrumb" separator=">">
        {views}
      </Breadcrumb>
    );
  }
}
